<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="用户名">
      <a-input v-model:value="formState.name" placeholder="输入用户名"/>
    </a-form-item>

    <a-form-item label="密码">
      <a-input-password v-model:value="formState.pwd" placeholder="输入密码"/>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        登录
      </a-button>
      <a-button style="margin-left: 10px">
        取消
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
  import { reactive, toRaw, UnwrapRef} from 'vue';

  interface FormState {
    name: string;
    pwd: string;
  }

  const formState: UnwrapRef<FormState> = reactive({
    name: '',
    pwd: '',
  });
  const onSubmit = () => {
    console.log('submit!', toRaw(formState));
  };
  const labelCol = {span: 4};
  const wrapperCol = {span: 14};

</script>
